<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>
</head>
<body>
    
    <div id="app">
        <!-- 
            v-on: 绑定事件

            v-on 指令用法:
                v-on:click='num++'
            简写:
                @click='num++'
            ===
            事件函数调用的方式:
                - 直接绑定函数名称
                    v-on:click='handle'
                - 调用函数
                    v-on:click='handle()' 
         -->
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击+1</button>
            <button @click='num++' >点击+1(另一种写法)</button>
        </div>

        <div>
            <button v-on:click='handle'>函数名称</button>
            <button v-on:click='handle()' >函数调用</button>
        </div>
        
        
        
    </div>

    <script type="text/javascript">
        
       var vm = new Vue({
           el:'#app',
           data:{
               num:0
           },
           methods:{
               // 这里的handle只是一个函数名没有特殊的含义
               handle : function(){
                   this.num++;
               }
           }
       })      
       
    </script>
</body>
</html>


       